<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>在线客服</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__PUBLIC__/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__PUBLIC__/layuiadmin/style/admin.css" media="all">
<body layadmin-themealias="default" style="">
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item" style="height: 20px;line-height: 20px;">
                <div class="layui-inline" style="margin-right: 0px;">
                     <span class="layui-breadcrumb">
                        <a href="">首页/在线客服</a>
                        </span>
                </div>
                <div class="layui-inline" style="right: 0px;position: absolute;">
                    <a class="layui-btn layui-btn-small" style="line-height:20px;margin-top:-6px;float:right" href="javascript:location.replace(location.href);" title="刷新">
                        &nbsp; <i class="layui-icon layui-icon-refresh-3" style="line-height:18px;left: 12px;top:12px;"></i> &nbsp;
                    </a>
                </div>
            </div>
        </div>
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline" style="margin-right: 0px;">
                    <label class="layui-form-label">游戏ID</label>
                    <div class="layui-input-inline">
                        <input type="text" name="gameid" placeholder="游戏ID"  class="layui-input" style="width:200px;">
                    </div>
                </div>
                <div class="layui-inline" style="margin-right: 0px;">
                    <button class="layui-btn layuiadmin-btn-admin" lay-submit="" lay-filter="LAY-user-back-search">
                        搜索
                    </button>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <table class="layui-hide" id="admin_table" lay-filter="admin_table"></table>
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delall">忽略</a>
            </script>
            <script type="text/html" id="table-status">
                {{# if(d.state =='1') { }}
                <span style="color: #ff5722">未处理</span>
                {{# }else if(d.state =='2'){ }}
                <span style="color: #01AAED">已处理</span>
                {{# }else { }}
                <span style="color: #2f4056">已忽略</span>
                {{# } }}
            </script>
            <script type="text/html" id="table-useradmin-admin">
                {{# if(d.remsg =='' || d.remsg == null) { }}
                    <a class="layui-btn layui-bg-blue layui-btn-sm"  lay-event="info">回复</a>
                {{# }else { }}
                    <a class="layui-btn layui-bg-orange layui-btn-sm"  lay-event="recharge">查看</a>
                {{# } }}

            </script>
        </div>
    </div>
</div>

<script src="__PUBLIC__/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '__PUBLIC__/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table','laydate'], function(){
        var $ = layui.$
            ,form = layui.form
            ,table = layui.table,laydate = layui.laydate;

        //时间范围
        laydate.render({
            elem: '#start'
            ,type: 'datetime'
        });
        //时间范围
        laydate.render({
            elem: '#end'
            ,type: 'datetime'
        });

        $(".layuiadmin-btn-admin").on("click",function(){
            var gameid = $("input[name=gameid]").val();

            table.reload('admin_table',{
                page:{
                    curr:1
                }
                ,where:{gameid:gameid}
            });
        });

        //执行一个 table 实例
        table.render({
            elem: '#admin_table'
            ,url: '/Broadcast/getcustomer' //数据接口
            ,title: '在线客服'
            ,page: true //开启分页
            ,toolbar: '#barDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,defaultToolbar: ['filter']
            ,height:650
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'gameid', title: '游戏ID', width:200}
                ,{field: 'msg', title: '反馈内容'}
                ,{field: 'time', title: '反馈时间', width:200}
                ,{field: 'state', title: '状态', width:160,toolbar: '#table-status',sort:true}
                ,{field: 'remsg', align:'center',title: '操作', maxWidth:220,toolbar: '#table-useradmin-admin'}

            ]],
            done:function (res) {
                for (var i=0;i<res['data'].length;i++){
                    var s=i+1
                    if(res['data'][i]['state'] == 1 ){
                      //  $('.layui-table').find('tr').eq(s).css('background-color','#d0bcc6');
                        $('.layui-table').find('tr').eq(s).css('font-weight','bold');
                    }else if(res['data'][i]['state'] == 2){
                        $('.layui-table').find('tr').eq(s).css('background-color','#6fd0b6');
                    }else{
                        $('.layui-table').find('tr').eq(s).css('background-color','#d0d0d0');
                    }
                }

            }
            ,where:{state:1}
        });

        /*//监听行单击事件（单击事件为：rowDouble）
        table.on('row(admin_table)', function(obj){
            var data = obj.data;

            layer.alert('返回内容：'+data.msg, {
                title: '查看反馈内容：'
            });

            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        });*/


        //头工具栏事件
        table.on('toolbar(admin_table)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'delall':
                    var data = checkStatus.data;
                    if(data.length == 0){
                       return layer.msg('请选择要操作的数据');
                    }
                    var id="";
                    for(var i=0;i<data.length;i++){
                        if(data[i]['state'] ==1){
                            id+=data[i]['id']+",";
                        }
                    }
                    id=id.substr(0,id.length-1);
                    if(id == ''){
                        return layer.msg('已处理的数据不要忽略');
                    }

                     console.log(id);
                    layer.confirm('真的要已忽略这条信息吗',function (index) {
                        $.ajax({
                            type:'get',
                            dataType:"json",
                            url:'delete?id='+id,
                            success:function (data) {
                                if(data['code'] == 1){
                                    layer.msg(data['msg'], {icon: 1,end:function () {
                                            layui.table.reload("admin_table");
                                        }});
                                }else{
                                    layer.msg(data['msg'], {icon: 2,end:function () {
                                            layui.table.reload("admin_table");
                                        }});
                                }
                            },
                            error:function () {
                                layer.msg('发生错误', {icon: 2});
                            },
                        });
                    });
                    break;
            };
        });
        //监听行工具事件
        table.on('tool(admin_table)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'recharge'){
                /*layer.alert('反馈内容：'+data.msg+'<br\>回复时间:'+data.retime+'<br\>回复内容：'+data.remsg, {
                    title: '查看回复内容：'
                });*/
                layer.open({
                    type:1,
                    title:'查看内容',
                    shade:0.8,
                    id:'test1',
                    moveType:1,
                    content:'<div style="padding: 15px;line-height: 30px;width:300px;height:200px;background-color: #393d49;color:#fff;font-weight: 300">反馈内容：'+data.msg+'<br>回复时间：'+data.retime+'<br>回复内容：'+data.remsg+'</div>'
                });
                //标注选中样式
                obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            } else if(obj.event === 'info'){
                layer.prompt({
                    title:'回复内容'
                    ,formType:2
                },function (text,index) {
                    // layer.msg('输入文本：'+text);
                    var id = data.id;
                    var gameid = data.gameid;
                    $.ajax({
                        type:'get',
                        dataType:"json",
                        url:'customer?id='+id+"&gameid="+gameid+"&text="+text,
                        success:function (data) {
                            if(data['code'] == 1){
                                layer.msg(data['msg'], {icon: 1,end:function () {
                                        layer.close(index);
                                        layui.table.reload("admin_table");
                                    }});
                            }else{
                                layer.msg(data['msg'], {icon: 2,end:function () {
                                        layer.close(index);
                                        layui.table.reload("admin_table");
                                    }});
                            }
                            // layer.clone(index);
                            // layui.table.reload("admin_table");
                        },
                        error:function () {
                            layer.msg('发生错误', {icon: 2});
                        },
                    });
                })
            }
        });
    });
</script>
</body>
</html>